<template>
  <j-modal
    :title="title"
    :width="800"
    :footer="null"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    :destroyOnClose="true"
    cancelText="关闭"
  >
    <div style="display: flex; justify-content: space-around">
      <div class="form" style="width: 48%">
        <!-- TODO 单位表格 -->
        <div style="margin: 0 auto" :class="{ isCheck: isCheck }" v-if="formType == '单位'">
          <table class="table table-striped table-bordered" align="center" valign="center">
            <tr>
              <td class="column">单位全称</td>
              <td class="value" colspan="3">
                <a-input v-model="submitData.unitName" :disabled="disableSubmit"></a-input>
              </td>
              <!--          无-->
              <td class="column">申报单位负责人</td>
              <td class="value">
                <a-input v-model="submitData.unitHead" :disabled="disableSubmit"></a-input>
              </td>
            </tr>
            <tr>
              <td class="column" rowspan="2">申报单位人数</td>
              <td class="value" rowspan="2">
                <a-input-number v-model="submitData.unitTotalNum" :disabled="disableSubmit"></a-input-number>
              </td>
              <td class="column">男</td>
              <td class="value">
                <a-input-number v-model="submitData.manNum" :disabled="disableSubmit"></a-input-number>
              </td>

              <td class="column">高级职称人数</td>
              <td class="value">
                <a-input-number v-model="submitData.highTitle" :disabled="disableSubmit"></a-input-number>
              </td>
            </tr>
            <tr>
              <td class="column">女</td>
              <td class="value">
                <a-input-number v-model="submitData.womanNum" :disabled="disableSubmit"></a-input-number>
              </td>

              <td class="column">中级职称人数</td>
              <td class="value">
                <a-input-number v-model="submitData.middleTitle" :disabled="disableSubmit"></a-input-number>
              </td>
            </tr>
            <tr>
              <td class="column title" colspan="6" style="text-align: center">先进事迹摘要</td>
            </tr>
            <tr>
              <td class="value" colspan="12">
                <a-textarea
                  :placeholder="disableSubmit ? '' : '先进材料应在1500字以内'"
                  v-model="submitData.storyAbstract"
                  :max-length="1500"
                  :auto-size="{ minRows: 30, maxRows: 30 }"
                  :disabled="disableSubmit"
                ></a-textarea>
              </td>
            </tr>
          </table>
        </div>

        <!-- TODO 个人表格 -->
        <div style="margin: 0 auto" :class="{ isCheck: isCheck }" v-if="formType == '个人'">
          <table class="table table-striped table-bordered" align="center" valign="center">
            <tr>
              <td class="column">姓名</td>
              <td class="value">
                <a-input v-model="submitData.peoName" :disabled="disableSubmit"></a-input>
              </td>
              <!--          无-->
              <td class="column">性别</td>
              <td class="value">
                <a-input v-model="submitData.peoSex" :disabled="disableSubmit"></a-input>
              </td>
              <td class="column">年龄</td>
              <td class="value">
                <a-input-number v-model="submitData.peoAge" :disabled="disableSubmit"></a-input-number>
              </td>
            </tr>
            <tr>
              <td class="column">政治面貌</td>
              <td class="value">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="submitData.politicsStatus"
                  dict-code="political_status"
                  :disabled="disableSubmit"
                />
                <!-- <a-input v-model="submitData.politicsStatus" :disabled="disableSubmit"></a-input> -->
              </td>
              <!--          无-->
              <td class="column">职务</td>
              <td class="value">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="submitData.post"
                  dict-code="job_structure"
                  :disabled="disableSubmit"
                />
                <!-- <a-input v-model="submitData.post" :disabled="disableSubmit"></a-input> -->
              </td>
              <!-- TODO 职称字典 -->
              <td class="column">职称</td>
              <td class="value">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="submitData.title"
                  dict-code="xj_zc"
                  :disabled="disableSubmit"
                />
                <!-- <a-input v-model="submitData.title" :disabled="disableSubmit"></a-input> -->
              </td>
            </tr>
            <tr>
              <td class="column">执业资格</td>
              <td class="value" colspan="3">
                <a-input v-model="submitData.skillRight" :disabled="disableSubmit"></a-input>
              </td>

              <td class="column">学历</td>
              <td class="value">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="submitData.educat"
                  dict-code="knowledge_structure"
                  :disabled="disableSubmit"
                />
                <!-- <a-input v-model="submitData.educat" :disabled="disableSubmit"></a-input> -->
              </td>
            </tr>
            <tr>
              <td class="column title" colspan="6" style="text-align: center">先进事迹摘要</td>
            </tr>
            <tr>
              <td class="value" colspan="12" style="height: 25vh">
                <a-textarea
                  :placeholder="disableSubmit ? '' : '先进材料应在1500字以内'"
                  v-model="submitData.storyAbstract"
                  :max-length="1500"
                  :auto-size="{ minRows: 30, maxRows: 30 }"
                  :disabled="disableSubmit"
                ></a-textarea>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="marigin: 0 30px; width: 1px; border-left: 1px dashed #383f6c"></div>
      <div class="status_list">
        <h4>审批进度</h4>
        <div style="margin-top: 15px">
          <!-- <a-table
            bordered
            :columns="columns"
            @change="handleTableChange"
            :pagination="ipagination"
            :data-source="dataSource"
            :scroll="{ x: 500 }"
          ></a-table> -->

          <a-steps :current="0" direction="vertical">
            <a-step v-for="item in dataSource" :key="item.id">
              <div slot="icon" class="step_icon">
                <a-icon type="solution" />
              </div>
              <span slot="title"
                ><div class="step_title">{{ item.createTime }}</div></span
              >
              <span slot="description">
                <div class="step_desc">
                  <div class="step_desc_item">
                    <a-col :sm="6"> <label>审批人：</label> </a-col>
                    <div>{{ item.reviewer }}</div>
                  </div>
                  <div class="step_desc_item">
                    <a-col :sm="6"> <label>审核结果：</label> </a-col>
                    <div>{{ item.reviewerResult }}</div>
                  </div>
                  <div class="step_desc_item">
                    <a-col :sm="6">
                      <label>单位：</label>
                    </a-col>
                    <div>{{ cases[item.level] }}</div>
                  </div>
                  <div class="step_desc_item">
                    <a-col :sm="6">
                      <label>审批意见：</label>
                    </a-col>

                    <div>
                      {{ item.opinion }}
                    </div>
                  </div>
                </div>
              </span>
            </a-step>
          </a-steps>
        </div>
      </div>
    </div>
  </j-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import columns from './columns'
import { postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'SysPositionModal',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      columns: columns(this),
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        onChange: (pageNumber) => {
          this.onChange(pageNumber)
        },
        showQuickJumper: true,
        total: 0,
      },
      cases: {
        3: '三级公司',
        2: '二级公司',
        1: '股份公司',
      },
      disableSubmit: false,
      title: '',
      visible: false,
      isCheck: false,
      model: {},
      url: {
        // get: '/sjzyzhgl/sjPlanInfo/planInfoList',
        // exportList: '/sjzyzhgl/sjPlanInfo/exportXlsByTemplate',
        list: '/check/assessment/selectOpinion',
        save: '/check/assessment/editAdvanceDept',
        look: '/check/assessment/selectByNo',
        savePeo: '/check/assessment/editAdvancePeo',
      },
      formType: '单位',
      queryParam: {},
      rowData: {},
      submitData: {},
      disableMixinCreated: true,
    }
  },
  created() {},
  methods: {
    check(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.httpRequest()
      this.list()
    },
    edit(record) {
      // TODO
      this.formType = record.advanceType
      this.rowData = record
      this.queryParam.approveId = record.approveId
      this.getTableData(record.approveId, record.advanceType)
    },
    async getTableData(id, type) {
      const { result } = await getAction(`${this.url.look}?id=${id}&advanceType=${type}`)
      this.submitData = Object.assign({}, result)
      this.loadData()
      this.visible = true
    },
    saveData(type) {
      let params = {
        id: this.rowData.id,
        submitFlag: type,
        ...this.submitData,
      }
      postAction(this.formType == '单位' ? this.url.save : this.url.savePeo, params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.visible = false
          this.submitData = {}
          this.$emit('submitd')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    list() {
      getAction(this.url.list, {
        proId: this.model.id,
        pageSize: this.ipagination.pageSize,
        pageNo: this.ipagination.current,
      }).then((res) => {
        if (res.success && res.result) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        } else {
          this.ipagination.total = 0
        }
      })
    },
    onChange(pageNumber) {
      this.ipagination.current = pageNumber
      this.list()
    },
    exportList() {
      getAction(this.url.exportList, { id: this.model.id })
        .then((res) => {
          if (res.success && res.result) {
            this.$message.success('正在下载，请稍等！')
            let url = `${window._CONFIG['domianURL']}/sys/common/static${res.result}`
            window.open(url, '_blank')
          } else {
          }
        })
        .finally(() => {})
    },
    close(isSubmit) {
      if (isSubmit) {
      } else {
        this.visible = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import './checkAndEdit.less';
@paramyColor: #3955a5;
.status_list {
  width: 48%;
  // margin-left: 50px;
  max-height: 88vh;
  overflow: auto;
}
h4 {
  color: #383f6c;
}
.step_icon {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 38px;
  border: 1px solid @paramyColor;
}
.step_desc {
  display: grid;
  // width: 80%;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 12px;
  grid-column-gap: 50px;
  margin-top: 5px;
  padding: 10px 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border: 1px dashed @paramyColor;
  .step_desc_item {
    display: flex;
    justify-content: space-between;
  }
}
.step_title {
  padding: 0 25px;
  text-align: center;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: @paramyColor;
  color: #fff;
  font-size: 12px;
}
.ant-steps-item-process {
  .step_icon {
    border-color: coral !important;
    background-color: #f4943d !important;
  }
  .step_title {
    background-color: #f4943d !important;
  }
  .step_desc {
    border-color: rgb(244, 148, 63) !important;
    background-color: rgba(244, 148, 63, 0.2) !important;
  }
  .anticon {
    color: #fff !important;
  }
}

.ant-steps-item-wait {
  .step_icon {
    border-color: #3955a6 !important;
    background-color: transparent !important;
  }
  .step_title {
    background-color: @paramyColor !important;
  }
  .step_desc {
    color: rgba(0, 0, 0, 0.65);
    border-color: @paramyColor !important;
    background-color: rgba(@paramyColor, 0.2) !important;
  }
  .anticon {
    color: @paramyColor !important;
  }
}
</style>
